<script src="/js/dt-bootstrap/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="/js/dt-bootstrap/DT_bootstrap.js" type="text/javascript"></script>
<script src="/js/common.js" type="text/javascript" ></script>
<!--<script src="/js/academico/laboratorioalumno/grid-vmlab.js" type="text/javascript" ></script>-->
<link type="text/css" rel="stylesheet" media="screen" href="/css/dt-bootstrap/DT_bootstrap.css">
<style type="text/css">
    .glyphicon { margin-right:5px;}
    .section-box h2 { margin-top:0px;}
    .section-box h2 a { font-size:15px; }
    .glyphicon-heart { color:#e74c3c;}
    .glyphicon-comment { color:#27ae60;}
    .separator { padding-right:5px;padding-left:5px; }
    .section-box hr {margin-top: 0;margin-bottom: 5px;border: 0;border-top: 1px solid rgb(199, 199, 199);}
    p { width: 100%; display: block; margin: 0px; padding: 0px; }
    .imgvm {width: 72px; height: 72px;}
    .pagination  {
        margin: 0px 0 !important;        
    }
    .user-row {
        margin-bottom: 14px;
    }

    .user-row:last-child {
        margin-bottom: 0;
    }

    .dropdown-user {
        margin: 13px 0;
        padding: 5px;
        height: 100%;
    }

    .dropdown-user:hover {
        cursor: pointer;
    }

    .table-user-information > tbody > tr {
        border-top: 1px solid rgb(221, 221, 221);
    }

    .table-user-information > tbody > tr:first-child {
        border-top: 0;
    }


    .table-user-information > tbody > tr > td {
        border-top: 0;
    }
</style>
<script type="text/javascript">
    var oTable;

    $.fn.dataTableExt.oApi.fnReloadAjax = function(oSettings, sNewSource, fnCallback, bStandingRedraw)
    {
        if (typeof sNewSource != 'undefined' && sNewSource != null) {
            oSettings.sAjaxSource = sNewSource;
        }

        // Server-side processing should just call fnDraw
        if (oSettings.oFeatures.bServerSide) {
            this.fnDraw();
            return;
        }

        this.oApi._fnProcessingDisplay(oSettings, true);
        var that = this;
        var iStart = oSettings._iDisplayStart;
        var aData = [];

        this.oApi._fnServerParams(oSettings, aData);

        oSettings.fnServerData.call(oSettings.oInstance, oSettings.sAjaxSource, aData, function(json) {
            /* Clear the old information from the table */
            that.oApi._fnClearTable(oSettings);

            /* Got the data - add it to the table */
            var aData = (oSettings.sAjaxDataProp !== "") ?
                    that.oApi._fnGetObjectDataFn(oSettings.sAjaxDataProp)(json) : json;

            for (var i = 0; i < aData.length; i++)
            {
                that.oApi._fnAddData(oSettings, aData[i]);
            }

            oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();

            if (typeof bStandingRedraw != 'undefined' && bStandingRedraw === true)
            {
                oSettings._iDisplayStart = iStart;
                that.fnDraw(false);
            }
            else
            {
                that.fnDraw();
            }

            that.oApi._fnProcessingDisplay(oSettings, false);

            /* Callback user function - for event handlers etc */
            if (typeof fnCallback == 'function' && fnCallback != null)
            {
                fnCallback(oSettings);
            }
        }, oSettings);
    };

    $(document).ready(function() {
        $.blockUI({
            message: "Aguarde un momento por favor"
        });
        reloadTable();
        $("#tabla ul").addClass("pagination");
        $.unblockUI();

    });

    function reloadTable() {
        if (oTable) {
            oTable.fnDestroy();
        }
        oTable = $('#lab_table').dataTable({
            "oLanguage": {
                "sLengthMenu": "_MENU_ records per page"
            },
            "sDom": "<'row'<'col-xs-6'l><'col-xs-6'f>r>t<'row'<'col-xs-6'i><'col-xs-6'p>>",
            //"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
            "sPaginationType": "bootstrap",
            aoColumnsDef: [],
            bLengthChange: false,
            bFilter: false,
            "aoColumns": [
                {
                    "sTitle": "M&aacute;quinas virtuales"
                }
            ],
            "sAjaxSource": "/academico/laboratorioalumno/mylabsbyid/codigo_laboratorio/<?php echo $this->codigoLaboratorio; ?>",
            //"sAjaxSource": "/js/academico/maquinaalumno/example.txt",    
            "fnServerData": function(sSource, aoData, fnCallback) {
                $.ajax({
                    "url": sSource,
                    "data": aoData,
                    "success": fnCallback,
                    "contentType": "application/json; charset=utf-8",
                    "dataType": "json",
                    "cache": false,
                    "error": function(xhr, error, thrown) {
                        //$("#div-alert").append('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><strong>Error! </strong>' + thrown + '</div>');
                        alertdiv("#div-alert", '<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><strong>Error! </strong>' + thrown + '</div>');
                    }
                });
            }
        });

    }
</script>
<input id="codigo_lab" type="hidden" name="opcion" value="<?php echo $this->codigoLaboratorio; ?>">
<h2>Laboratorio</h2>
<div id="div-alert">   
</div>
<div class="row user-infos cyruxx" style="display: block;">
    <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 col-xs-offset-0 col-sm-offset-0 col-md-offset-1 col-lg-offset-1">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title"><?php echo $this->nombreLaboratorio; ?></h3>
            </div>
            <div class="panel-body">
                <div class="row">                        
                    <div class="col-md-3 col-lg-3 text-center">
                        <img alt="Maquina Virtual" src="<?php echo $this->baseUrl() . "/images/computer.jpg" ?>" class="img-circle" style="margin-top: 10px">
                    </div>                        
                    <div class=" col-md-9 col-lg-9">                            
                        <table class="table table-user-information">
                            <tbody>                                
                                <tr>
                                    <td>Fecha de creaci&oacute;n:</td>
                                    <td><?php echo $this->fechaCreacion; ?></td>
                                </tr>
                                <tr>
                                    <td>Descripci&oacute;n:</td>
                                    <td><?php echo $this->descripcion; ?></td>
                                </tr>                                                              
                                <tr>
                                    <td>Fecha inicio:</td>
                                    <td><?php echo $this->fechaInicio; ?></td>
                                </tr>                                                              
                                <tr>
                                    <td>Fecha fin:</td>
                                    <td><?php echo $this->fechaFin; ?></td>
                                </tr>                                                              
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row user-infos cyruxx" class="display: block;">    
    <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 col-xs-offset-0 col-sm-offset-0 col-md-offset-1 col-lg-offset-1">        
        <div class="panel panel-primary">  
            <div class="panel-heading">
                <h3 class="panel-title">M&aacute;quinas virtuales</h3>
            </div>
            <div class="panel-body">
                <br />
                <div class="row-fluid">                                            
                    <div class=" col-md-12 col-lg-12">
                        <div id="tabla" style="display: block;">
                            <table class="table table-striped table-bordered table-user-information"  style="margin-top: 3px;" id="lab_table">
                            </table>
                            <br />
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>